vue 2 实现自定义组件一到多个v |
您所在的位置:网站首页 › vuedraggable 自定义表单 › vue 2 实现自定义组件一到多个v |
前言
有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件。 甚至有时候,我们想要实现绑定多个 “v-model”,也就是多个“双向绑定”,例如带表单输入的模块框,想同时控制模态框的显示状态与表单的输入状态。好在 vue 3 已经实现了多 v-model,那么在 vue 2 上我们可以如下实现。 单个“双向绑定”的实现使用 model 实现 其实 v-model 只是 value + change 的语法糖,监听输入并触发改变,因此只要实现 “监听” + “触发” 就可以自定义 v-model 啦。 export default { data() { return { value: '' } } } export default { props: { value: String, }, model: { prop: 'value', // 指定 v-model 要绑定的参数叫什么名字,来自于 props 中定义的参数 event: 'change', // 指定要触发的事件名字,将被用于 $emit }, computed: { input: { // 这里的计算属性使用了 getter、setter,可以简化代码 // 可参见链接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter get() { return this.value; } |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |